<template>
    <div>
        <div class="MessageShow" v-if="true">
            <div>
                <hover-tip>123123</hover-tip>
                <client-only>
                    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top">
                        <p>123</p>
                    </el-tooltip>
                </client-only>

                <el-button @click="showMessage('success')">suc</el-button>
                <el-button @click="showMessage('warning')">warning</el-button>
                <el-button @click="showMessage('error')">error</el-button>

                <CommonTab v-model="tab" :tabs="tabs"></CommonTab>
                <CommonColorBlock :name="'red'" color="#fff"></CommonColorBlock>

                <div class="canvas">
                    <canvas id="canvas"></canvas>
                </div>
            </div>

            <CommonPage :total="pageData.total" :current-page="pageData.page_num" :page-size="pageData.page_size" @current-change="changePage"></CommonPage>
        </div>
        <div class="apple" v-if="false">
            <div class="path" :style="getTransformStyle(scaleData.class1, 0)">
                <picture>
                    <img src="https://www.apple.com.cn/v/ipad-air/r/images/overview/design/colors_ipad_1__duc962moy3iq_large.jpg" alt="" />
                </picture>
            </div>
            <!-- <div class="path" :style="getTransformStyle(scaleData.class1, 1)">
        <picture>
          <img
            src="https://www.apple.com.cn/v/ipad-air/r/images/overview/design/colors_ipad_1__duc962moy3iq_large.jpg"
            alt=""
          />
        </picture>
      </div> -->
        </div>
        <div class="testBox" v-if="false">
            <div class="surround-box">
                <!-- <div class="circle circle1">1</div> -->
                <!-- <div class="circle circle2">2</div> -->
                <!-- <div class="circle circle3">3</div> -->
                <div class="circle circle4" :style="
                        'transform: rotateZ(' +
                        (288 + test.r) +
                        'deg) translateY(' +
                        (1000 + test.y) +
                        'px) scale(' +
                        (1 + test.s) +
                        ')'
                    "></div>
                <div class="circle circle5" :style="
                        'transform: rotateZ(' +
                        (300 + test.r) +
                        'deg) translateY(' +
                        (1000 + test.y) +
                        'px) scale(' +
                        (1 + test.s) +
                        ')'
                    ">
                    5
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "MessageShow",
    data () {
        return {
            tab: 1,
            tabs: [
                {
                    value: 1,
                    label: "My material library1",
                },
                {
                    value: 2,
                    label: "My material library2",
                },
                {
                    value: 3,
                    label: "My material library3",
                },
            ],
            pageData: {
                page_num: 1,
                total: 8,
                page_size: 1,
            },
            transScale: {
                1: {
                    top: 0,
                    left: 0,
                    rotate: 0,
                    scale: 0,
                },
                2: {
                    top: 2.5,
                    left: 2.5,
                    rotate: 2.5,
                },
                3: {
                    top: 3,
                    left: 3,
                    rotate: 3,
                },
            },
            scaleData: {
                // scale_t: 1,
                // scale_l: -2,
                // scale_r: 0.5,
                // scale_s: -0.006,
                class1: {
                    pictures: [
                        {
                            l: 0,
                            t: 0,
                            r: 0,
                            s: 1,
                        },
                        {
                            l: 40,
                            t: -90,
                            r: 87,
                            s: 1,
                        },
                        {
                            l: 36,
                            t: -76,
                            r: 87,
                            s: 1,
                        },
                    ],
                    addData: {
                        add_t: 0,
                        add_l: 0,
                        add_r: 0,
                        add_s: 0,
                    },
                    scale: {
                        scale_l: 10 / 500,
                        scale_t: 160 / 500,
                        scale_r: -107 / 500,
                        scale_s: -0.0008,
                    },
                    // scale: {
                    //   scale_l: 10 / 500,
                    //   scale_t: 160 / 500,
                    //   scale_r: -107 / 500,
                    //   scale_s: -0.0008,
                    // },
                },
            },
            test: {
                r: 0,
                y: 0,
                s: 0,
            },
        };
    },
    computed: {},
    methods: {
        changePage (e) {
            this.pageData.page_num = e;
        },
        showMessage (type) {
            this.$uxMessage[type](
                "This template has been modified successfully!"
            );
        },

        getTransformStyle (data, index) {
            let pictures = data.pictures || [];
            let addData = data.addData || {};
            let obj = pictures[index] || {};
            let str = "transform: ";
            let scale = obj.s + addData.add_s;
            let rotate = obj.r + addData.add_r;
            let left = obj.l + addData.add_l;
            let top = obj.t + addData.add_t;
            str += "scale(" + scale + ") ";
            str += "rotate(" + rotate + "deg) ";
            str += "translate3d(" + left + "%, " + top + "%, 0)";
            return str;
        },
        changeTransform (key, count) {
            let { scale, addData } = this.scaleData[key] || {};
            let { scale_l, scale_r, scale_s, scale_t } = scale;
            addData.add_t = scale_t * count;
            addData.add_l = scale_l * count;
            addData.add_s = scale_s * count;
            addData.add_r = scale_r * count;
        },
        onScroll (e) {
            let scroll =
                document.documentElement.scrollTop || document.body.scrollTop;
            if (scroll > 0) {
                let count = Math.floor(scroll / 1);
                // this.test.r = count * -0.2;
                // this.test.y = -count * 1;
                this.changeTransform("class1", count);
            }
        },
    },
    created () {
        if (process.env.NODE_ENV != "development") {
            this.$router.replace("/");
        }
        if (process.client) {
            window.addEventListener("scroll", this.onScroll);
        }
    },
    mounted () {
        return;
        setTimeout(() => {
            this.$uxMessage({
                type: "success",
                showClose: true,
                duration: 99999,
                message: "test",
            });
        }, 500);
        setTimeout(() => {
            this.$uxMessage.warning("warning");
        }, 1000);
    },
    destroyed () {
        window.removeEventListener("scroll", this.onScroll);
    },
};
</script>
<style lang="scss" scoped>
.MessageShow {
    display: flex;
    flex-direction: column;
    > * {
        margin: 20px 0;
    }
}
.apple {
    width: 100vw;
    overflow: hidden;
    position: relative;
    height: 3000px;
    .path {
        // transition: all 0.3s;
        height: 858px;
        width: 698px;
        position: absolute;
        transform-origin: left bottom;
        top: -400px;
        left: -400px;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        mask-image: url('https://img.podpartner.com/static/images-20230202/apple-mask.png');
        // &:nth-child(1) {
        //   top: 500px;
        //   left: 400px;
        // }
        // &:nth-child(3) {
        //   top: 1100px;
        //   left: 1200px;
        // }
    }
}
.testBox {
    width: 100vw;
    min-height: 2000px;
    .surround-box {
        position: absolute;
        top: 1000px;
        left: 0;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        transform: translateX(-50%);
        background-color: #000;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .circle {
        /* 这里一定要绝对定位，这样位置才能铺开来 */
        position: absolute;
        // top: -10px;
        // left: -10px;
        width: 80px;
        height: 80px;
        height: 858px;
        width: 698px;
        line-height: 40px;
        // border-radius: 50%;
        text-align: center;
        color: #fff;
        picture {
            display: block;
            height: 858px;
            width: 698px;
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            mask-image: url('https://img.podpartner.com/static/images-20230202/apple-mask.png');
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .circle1 {
        background-color: red;
        /* rotateZ控制方向，每个元素旋转30度，12个元素刚好360度。translateY控制每个元素距中心点的距离 */
        transform: rotateZ(72deg) translateY(1000px);
    }
    .circle2 {
        background-color: orange;
        transform: rotateZ(144deg) translateY(1000px);
    }
    .circle3 {
        background-color: yellow;
        transform: rotateZ(216deg) translateY(1000px);
    }
    .circle4 {
        background-color: green;
        transform: rotateZ(288deg) translateY(1000px);
    }
    .circle5 {
        background-color: seagreen;
        transform: rotateZ(360deg) translateY(1000px);
    }
}
</style>
